import React, { useState } from 'react'
import { Button, Table, Modal, Col, Row, message } from 'antd'
import { formatTime } from '~/utils/utils'
import PopoverColumn from '~/components/popover-column'
import ItemModal from '~/components/item-modal'
import { batchGetTmpHttpUrl } from '~/api/store-file-api'
import { queryDetail } from '~/api/upload-item-api'
import { CustodyState, TaskItemMap, AcqueryWayMap } from '~/constants'
import { getCbrByCaseNo } from '~/api/query-api'

let cacheRecord: any = {}

const colums: any = ({ onTrajectory, onClickViewImage, onClickDepositCertificate, setModalVisible }: any) => [
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    fixed: 'left',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '物品名称',
    dataIndex: 'itemName',
    align: 'center',
    fixed: 'left'
  },
  {
    title: '案件编号',
    dataIndex: 'caseNo',
    align: 'center',
    fixed: 'left',
    render: (caseNo: any, record: any) => (
      <PopoverColumn record={record}>
        <a>{caseNo}</a>
      </PopoverColumn>
    )
  },
  {
    title: '案件名称',
    dataIndex: 'caseName',
    align: 'center',
    fixed: 'left',
    render: (caseName: any, record: any) => (
      <PopoverColumn record={record}>
        <a>{caseName}</a>
      </PopoverColumn>
    )
  },
  {
    title: '物品编号',
    dataIndex: 'serialNo',
    align: 'center',
    fixed: 'left',
    render: (serialNo: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {serialNo}
      </a>
    )
  },
  {
    title: '数量（单位）',
    dataIndex: 'itemStock',
    align: 'center',
    render: (itemName: any, record: any) => (
      <div>
        {record.itemStock.totalNumber} ({record.itemStock.unitName})
      </div>
    )
  },
  {
    title: '采集时间',
    dataIndex: 'createTime',
    align: 'center',
    render: (acquireTime: any) => <div>{formatTime(acquireTime)}</div>
  },
  {
    title: '实际执行时间',
    dataIndex: 'acquireTime',
    align: 'center',
    render: (createTime: any) => <div>{formatTime(createTime)}</div>
  },
  {
    title: '移送/告知时间',
    dataIndex: 'reportTime',
    align: 'center',
    render: (reportTime: any) => <div>{formatTime(reportTime)}</div>
  },
  {
    title: '接收/确认告知时间',
    dataIndex: 'receiveTime',
    align: 'center',
    render: (receiveTime: any) => <div>{formatTime(receiveTime)}</div>
  },
  {
    title: '规格',
    dataIndex: 'specs',
    align: 'center'
  },
  {
    title: '特征',
    dataIndex: 'feature',
    align: 'center'
  },
  {
    title: '处理结果',
    dataIndex: 'dealReason',
    align: 'center',
    render: (dealReason: any) => <div>{TaskItemMap.get(dealReason)}</div>
  },
  {
    title: '保管状态',
    dataIndex: 'storageStatus',
    align: 'center',
    render: (storageStatus: any) => <div>{CustodyState.get(storageStatus)}</div>
  },
  {
    title: '物品去向',
    dataIndex: 'whereabouts',
    key: 'whereabouts',
    render: (whereabouts: any, record: any) => (
      <div>{whereabouts === 'OTHER' ? record.whereaboutsRemark : record.whereaboutsName}</div>
    )
  },
  {
    title: '获取方式',
    dataIndex: 'acquireWay',
    key: 'acquireWay',
    render: (acquireWay: any, record: any) => <div>{AcqueryWayMap.get(acquireWay)}</div>
  },

  {
    title: '库架编号',
    dataIndex: 'storeLocationNo',
    align: 'center',
    render: () => (
      <Button size="small" type="primary">
        查看
      </Button>
    )
  },
  {
    title: '存放地',
    dataIndex: 'storeLocation',
    align: 'center'
  },
  {
    title: '实物所在地',
    dataIndex: 'location',
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'remark',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    key: 'action  ',
    render: (_: any, record: any) => (
      <div>
        <Button
          size="small"
          type="primary"
          onClick={() => {
            onTrajectory(record)
          }}
        >
          轨迹
        </Button>
        <Button onClick={() => onClickViewImage(record)} style={{ marginLeft: 8 }} size="small" type="primary">
          查看图片
        </Button>
        <Button onClick={() => onClickDepositCertificate(record)} style={{ marginLeft: 8 }} size="small" type="primary">
          存放凭证
        </Button>
      </div>
    )
  }
]

const MoveList = ({ moveList, onTrajectory }: any) => {
  const [visible, setVisible] = useState(false)
  const [modalVisible, setModalVisible] = useState(false)
  const [imgList, setImgList] = useState([])

  const onClickViewImage = async (record: any) => {
    const { data } = await queryDetail({ serialNo: record.serialNo })
    if (!data.length) return message.info('无相关图片')
    const storeIds = data.map((item: any) => item.storeId)
    const res = await batchGetTmpHttpUrl(storeIds)
    setImgList(res.data)
    setVisible(true)
  }
  const onClickDepositCertificate = async (record: any) => {
    console.log('record', record)
    if (!record.storePics) return message.info('无相关凭证')
    const storeIds = JSON.parse(record.storePics).map((item: any) => item.storeId)
    const res = await batchGetTmpHttpUrl(storeIds)
    setImgList(res.data)
    setVisible(true)
    console.log('1', res)
  }
  return (
    <div>
      <Table
        rowKey="id"
        scroll={{ x: 'max-content' }}
        bordered
        dataSource={moveList}
        pagination={{
          size: 'default',
          total: moveList.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }}
        columns={colums({ onTrajectory, onClickViewImage, onClickDepositCertificate, setModalVisible })}
      />
      <Modal
        footer={null}
        onCancel={() => {
          setVisible(false)
        }}
        width={'max-content'}
        visible={visible}
      >
        <Row>
          {imgList.map((item: any, index: number) => (
            <Col span={12} key={index} style={{ padding: 24 }}>
              <img style={{ width: 300 }} src={item.tmpHttpUrl} />
            </Col>
          ))}
        </Row>
      </Modal>
      <ItemModal visible={modalVisible} setVisible={setModalVisible} record={cacheRecord} />
    </div>
  )
}

export default MoveList
